<script setup lang="ts" name="editData">
import { onMounted } from 'vue'
import useEditIndex from '@/views/hooks/editIndex'
const { childRef, lis, editDate, isActive, isShowSave, menuClicked, isShowSaveHandle, saveData } =
  useEditIndex()
onMounted(() => {
  menuClicked(lis.value[0].id)
})
</script>

<template>
  <div id="aside-main-aside">
    <div class="aside"></div>
    <div class="main edit">
      <div class="menu">
        <ul>
          <li
            class="default-button"
            :class="{ active: isActive === item.id }"
            v-for="item in lis"
            :key="item.id"
            @click="menuClicked(item.id)"
          >
            {{ item.item }}
          </li>
        </ul>
        <p class="reverse-button" v-show="isShowSave" @click="saveData">保存</p>
      </div>
      <div>
        <component
          :is="editDate"
          ref="childRef"
          :save="isShowSave"
          @changed="isShowSaveHandle"
        ></component>
      </div>
    </div>
    <div class="aside"></div>
  </div>
</template>

<style scoped lang="less">
.active {
  background-color: var(--color2);
  color: var(--color3);
}
.edit {
  background-color: var(--color1);
  border-radius: var(--radius);
  > .menu {
    display: grid;
    grid-template-columns: 1fr 80px;
    border-bottom: 2px dashed var(--color2);
    padding: 10px 10px 0 10px;
    > ul {
      display: flex;
      list-style: none;
      > li {
        cursor: pointer;
        padding: 10px;
        border-radius: var(--radius) var(--radius) 0 0;
        color: var(--color3);
      }
    }
    > p {
      cursor: pointer;
      padding: 10px;
      text-align: center;
      border-radius: var(--radius) var(--radius) 0 0;
      color: var(--color3);
      background-color: var(--color2);
    }
  }
  > div:nth-child(2) {
    padding: 0 10px;
  }
}
</style>
